<template>
  <a-card :bordered="false">
    <div class="group table-page-search-wrapper">
      <div class="roder-details">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="订单基本信息">
            <div class="info">

              <div class="box">
                <!--<a href="" class="dc" style="cursor: pointer;">导出</a>-->
                <h3 class="title">订单基础信息</h3>
                <div class="list">
                  <div class="list-div">

                    <div>
                      <p>门店名称</p>
                      <span>{{ baseData.storeName }}</span>
                    </div>

                    <div>
                      <p>下单员工</p>
                      <span>{{ baseData.empName }}</span>
                    </div>

                    <div>
                      <p>员工电话</p>
                      <span>{{ baseData.empPhone }}</span>
                    </div>

                    <div>
                      <p>订单编号</p>
                      <span>{{ baseData.orderSn }}</span>
                    </div>
                    <!--                  <div>
                                        <p>门店编号</p>
                                        <span>{{ baseData.storeCode }}</span>
                                      </div>-->
                    <div>
                      <p>创建时间</p>
                      <span>{{ baseData.createTime }}</span>
                    </div>

                    <div v-if="baseData.payTime!='' && baseData.payTime!=null">
                      <p>支付时间</p>
                      <span>{{ baseData.payTime }}</span>
                    </div>

                    <div>
                      <p>客户编号</p>
                      <span>{{ baseData.companyCode }}</span>
                    </div>
                    <div>
                      <p>客户名称</p>
                      <span>{{ baseData.companyName }}</span>
                    </div>

                    <!--                  <div>
                                        <p>订单金额</p>
                                        <span>{{ baseData.orderMoney }}元</span>
                                      </div>-->
                    <div>
                      <p>公司名称</p>
                      <!--<span>{{baseData.customerInfo.customerName}}</span>-->
                      <span v-if="baseData.customerInfo!=null">{{ baseData.customerInfo.customerName }}</span>
                    </div>
                    <!--                  <div>
                                        <p>面料来源</p>
                                        <span>{{ baseData.fabricSource }}</span>
                                      </div>-->
                    <!--                  <div>
                                        <p>订单名称</p>
                                        <span>{{ baseData.orderName }}</span>
                                      </div>-->
                    <!--                  <div>
                                        <p>业务来源</p>
                                        <span>{{ baseData.businessSource }}</span>
                                      </div>-->
                    <!--                  <div>
                                        <p>快递方式</p>
                                        <span>{{ baseData.courierName }}</span>
                                      </div>-->
                    <!--                  <div>
                                        <p>包装方式</p>
                                        <span>{{ baseData.packageType }}</span>
                                      </div>-->
                    <!--                  <div style="width: 50%">
                                        <p>地址</p>
                                        <span>{{ baseData.address }}</span>
                                      </div>-->
                  </div>
                </div>
                <!--              <div class="list" style="margin-bottom: 0px;">
                                <div class="list-div">
                                  <div>
                                    <p>订单备注</p>
                                    <span>{{ baseData.remark }}</span>
                                  </div>
                                </div>
                              </div>-->
              </div>

              <div class="box">

                <h3 class="title">采购项列表</h3>
                <!--部门产品列表-->
                <div v-for="(item,key) in departProductlist" :key="item.id">
                  <div class="list" style="margin-bottom: 20px;">
                    <div class="list-div">
                      <div>
                        <p>采购项名称</p>
                        <span>{{ item.departName }}</span>
                      </div>
                      <div>
                        <p>收货人</p>
                        <span>{{ item.consignee }}</span>
                      </div>
                      <div>
                        <p>收货电话</p>
                        <span>{{ item.phone }}</span>
                      </div>

                      <div style="width: 100%">
                        <p>收货地址</p>
                        <span>{{ item.address }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="table-css" style="margin-bottom: 20px;">
                    <a-table class="table1" lign="center" :columns="depProduct"
                             :data-source="item.productInfos"
                             :pagination="false">
                      <!-- <p slot="xiuziWeizhi" slot-scope="text">
                           <span v-if="text == '1'">{{text}}</span>
                           <router-link v-else to="/MyOrderSubsystem/CustomizesInfo"
                                        style="color:#C49D18">
                               定制款(查看详细)
                           </router-link>
                       </p>
                       <p slot="allConColor" slot-scope="text">
                           <span v-if="text != '1'">{{text}}</span>
                           <router-link v-else to="/MyOrderSubsystem/CustomizesInfo"
                                        style="color:#C49D18">
                               定制款(查看详细)
                           </router-link>
                       </p>-->
                      <p slot="action" slot-scope="text,record">
                        <!--<span v-if="text != '1'">{{text}}</span>-->
                        <router-link
                          :to="{path:'/MyOrderSubsystem/CustomizesInfo',query:{product:record.id}}"
                          style="color:#C49D18">
                          查看详细
                        </router-link>
                      </p>
                    </a-table>
                  </div>
                </div>

                <!--这是员工列表-->
                <h3 class="title">员工列表</h3>
                <div v-for="(item,key) in departProductlist" :key="item.id">
                  <h4 class="title2" style="font-size: 16px;font-weight: 700;">{{ item.departName }}</h4>
                  <a-button style="margin-bottom:10px" type="primary" @click="download(item.id)">下载量体表</a-button>
                  <div class="table-css" style="margin-bottom: 20px;">
                    <a-table class="table1" lign="center" :columns="emp"
                             :data-source="item.smallPro"
                             :pagination="false">
                      <p slot="k6" slot-scope="text,record">
                        <!--<span v-if="text == '2'" style="color:#C49D18">套号量体</span>-->
                        <span style="color:#C8442A">{{ record.bodysType == '0' ? '自定义尺码' : '标准尺码' }}</span>
                      </p>
                      <p slot="k7" slot-scope="text,record">
                        <router-link
                          :to="{path:'/MyOrderSubsystem/CustomizesClothesInfo',query:{proID:record.id,orderSn:$route.query.order}}"
                          style="color:#C8442A">查看详情
                        </router-link>
                      </p>

                      <p slot="k8" slot-scope="text,record">
                        <router-link
                          :to="{path:'/MyOrderSubsystem/DeppDetail',query:{proID:record.id,orderSn:$route.query.order}}"
                          style="color:#C8442A">查看详情
                        </router-link>
                      </p>
                    </a-table>
                  </div>
                </div>

              </div>

              <div class="box">


                <!--<h3 class="title">订单附加条件</h3>
                <div class="tabs" style="margin-bottom: 20px;">
                  <div class="tab">
                    <h5>式样</h5>
                    <div class="tab-content">
                      &lt;!&ndash;<p v-for="item in tab1Data" :key="item.id"
                         :class="{'active':tab1Idx == item.id}">{{item.name}}</p>&ndash;&gt;
                      <p>{{baseData.shiyang}}</p>
                    </div>
                  </div>
                  <div class="tab">
                    <h5>紧急指数</h5>
                    <div class="tab-content">
                      &lt;!&ndash;<p style="width:160px" v-for="item in tab2Data" :key="item.id"
                         :class="{'active':tab2Idx == item.id}"><span>{{item.name}}</span><b>{{item.hoveName}}</b>
                      </p>&ndash;&gt;
                      <p>{{baseData.emergency}}</p>
                    </div>
                  </div>
                  <div class="tab">
                    <h5>改款打样</h5>
                    <div class="tab-content">
                      &lt;!&ndash;<p v-for="item in tab3Data" :key="item.id"
                         :class="{'active':tab3Idx == item.id}">{{item.name}}</p>&ndash;&gt;
                      <p>{{baseData.modifiedYang}}</p>
                    </div>
                  </div>
                  <div class="tab">
                    <h5>品牌标</h5>
                    <div class="tab-content">
                      &lt;!&ndash;<p v-for="item in tab4Data" :key="item.id"
                         :class="{'active':tab4Idx == item.id}">{{item.name}}</p>&ndash;&gt;
                      <p>{{baseData.brandLabel}}</p>
                    </div>
                  </div>
                  <div class="tab">
                    <h5>订单备注</h5>
                    <div class="tab-content">
                      &lt;!&ndash;<p v-for="item in tab5Data" :key="item.id"
                         :class="{'active':tab5Idx == item.id}">{{item.name}}</p>&ndash;&gt;
                      <p>{{baseData.remark}}</p>
                    </div>
                  </div>
                </div>-->


                <h3 class="title">订单费用明细</h3>
                <h4 class="title2">面料费用</h4>
                <div class="table-css">
                  <a-table class="table1" lign="center" :columns="fabriclist"
                           :data-source="orderDetail.allFabric"
                           :pagination="false">
                    <!--<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
                    <a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>
                    <a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>-->
                  </a-table>
                </div>

                <h4 class="title2">客供面料</h4>
                <div class="table-css">
                  <a-table class="table1" lign="center" :columns="keFabric"
                           :data-source="orderDetail.keFabric"
                           :pagination="false">
                  </a-table>
                </div>

                <h5 class="price1">面料费用小计：<span>{{ orderDetail.fabricPriceAll }}元</span></h5>

                <h4 class="title2">加工费用</h4>
                <!--<div>
                  <div class="table-css">
                    <a-table class="table1" lign="center" :columns="allprolist"
                             :data-source="orderDetail.allPro"
                             :pagination="false">
                      &lt;!&ndash;<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
                      <a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>
                      <a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>&ndash;&gt;
                    </a-table>
                  </div>
                </div>-->
                <h4 class="title2">标准码加工费用</h4>
                <div>
                  <div class="table-css">
                    <a-table class="table1" lign="center" :columns="allprolist"
                             :data-source="bzmPriceList"
                             :pagination="false">
                    </a-table>
                  </div>
                </div>

                <h4 class="title2">团订加工费用</h4>
                <div>
                  <div class="table-css">
                    <a-table class="table1" lign="center" :columns="allprolist"
                             :data-source="zdyPriceList"
                             :pagination="false">
                    </a-table>
                  </div>
                </div>

                <h4 class="title2">加价项目</h4>
                <div>
                  <div class="table-css">
                    <a-table class="table1" lign="center" :columns="fuwuFabricTitle"
                             :data-source="shouFeiList"
                             :pagination="false">
                    </a-table>
                  </div>
                </div>

                <h5 class="price1">加工费用小计(包含辅料价格)：<span>{{ allProductMoney }}元</span></h5>

                <h4 class="title2">收费服务</h4>
                <div>
                  <div class="table-css">
                    <a-table class="table1" lign="center" :columns="jiajia"
                             :data-source="jiajiaList"
                             :pagination="false">
                    </a-table>
                  </div>
                </div>


                <!--<h4 class="title2">现货费用</h4>
                <div>
                    <div class="table-css">
                        <a-table class="table1" lign="center" :columns="columns5" :data-source="data1"
                                 :pagination="false">
                            <a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
                            <a slot="k9" slot-scope="text" style="color:#C49D18">{{text}}</a>
                            <a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>
                        </a-table>
                    </div>
                </div>
                <h5 class="price1">现货费用小计：<span>22800元</span></h5>-->


                <div class="prices">
                  <h5 class="price">订单费用总计：<span>{{ orderDetail.orderMoney }}元</span></h5>
                  <h5 v-if="orderDetail.priorPrice!=0" class="price">调价前金额：<span>{{ orderDetail.priorPrice }}元</span></h5>
                  <h5 v-if="orderDetail.priorPrice!=0" class="price">原总金额：<span>{{ orderDetail.firstPrice }}元</span></h5>
                  <h5 v-if="orderDetail.status>=1 && orderDetail.status<=10 && orderDetail.deductionPay!=0"
                      class="price">抵扣额度支付：<span>{{ orderDetail.deductionPay }} 元</span></h5>
                  <h5 v-if="orderDetail.status>=1 && orderDetail.status<=10 && orderDetail.monthPay!=0"
                      class="price">月结剩余额度支付：<span>{{ orderDetail.monthPay }} 元</span></h5>
                  <h5 v-if="orderDetail.status>=1 && orderDetail.status<=10 && orderDetail.balancePay!=0"
                      class="price">余额支付：<span>{{ orderDetail.balancePay }} 元</span></h5>
                  <!--                <h5 class="price">支付方式：月结</h5>-->
                </div>
                <div class="btns">
                  <div v-if="orderDetail.status=='11'" @click="tflag = true" class="btn1">调价</div>
                </div>

                <h3 class="title">订单备注</h3>
                <textarea class="text1" disabled v-model="baseData.remark"
                          style="color: rgb(153, 153, 153);"></textarea>

                <div class="btns">
                  <div @click="openDelWindow" class="btn1"
                       v-if="orderDetail.status>='1'&&orderDetail.status!='11'&&orderDetail.status!='10' &&orderDetail.status!='8' ">
                    驳回
                  </div>
                  <div class="btn1" @click="$router.go(-1)" style="width:147px">返回</div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="订单状态跟踪" force-render>
            <div class="info">

              <div class="box">
                <h3 class="title">订单状态跟踪</h3>
                <div v-for="(item,key) in trackList" :key="item.id">
                  <h4 class="title10">{{ item.createTime }}</h4>
                  <div class="text10">
                    <p>订单状态:</p>
                    <div>
                      <span v-if="item.orderStatus==null">未支付</span>
                      <span v-if="item.orderStatus=='0'">未支付</span>
                      <span v-if="item.orderStatus=='1'">已支付</span>
                      <span v-if="item.orderStatus=='2'">申请售后</span>
                      <span v-if="item.orderStatus=='3'">已接单</span>
                      <span v-if="item.orderStatus=='4'">已发货</span>
                      <span v-if="item.orderStatus=='5'">已完成</span>
                      <span v-if="item.orderStatus=='6'">备库</span>
                      <span v-if="item.orderStatus=='7'">驳回</span>
                    </div>
                  </div>
                  <div class="text10">
                    <p>订单事件:</p>
                    <div>
                      <span>{{ item.thing }}</span>
                    </div>
                  </div>

                  <div class="text10">
                    <p>事件备注:</p>
                    <div>
                      <span>{{ item.remark }}</span>
                    </div>
                  </div>
                </div>

              </div>

            </div>

          </a-tab-pane>
          <a-tab-pane key="3" tab="批次状态更新">
            <div class="info">
              <div class="box">
                <h3 class="title">订单批次</h3>
                <a-button @click="openNewPacking" style="display: inline;margin-bottom:15px;" type="primary">
                  新增批次
                </a-button>
                <!--table区域-begin-->
                <div>
                  <a-table
                    style="width: 100%"
                    ref="table"
                    size="middle"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="packingList"
                    :pagination="ipagination"
                    :loading="loading"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                    class="j-table-force-nowrap"
                    @change="handleTableChange">

                    <template slot="htmlSlot" slot-scope="text">
                      <div v-html="text"></div>
                    </template>

                    <template slot="imgSlot" slot-scope="text">
                      <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                      <img v-else :src="getImgView(text)" height="30px" alt=""
                           style="max-width:80px;font-size: 12px;font-style: italic;"/>
                    </template>
                    <template slot="fileSlot" slot-scope="text">
                      <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                      <a-button
                        v-else
                        :ghost="true"
                        type="primary"
                        icon="download"
                        size="small"
                        @click="uploadFile(text)">
                        下载
                      </a-button>
                    </template>

                    <span slot="action" slot-scope="text, record">
                    <a-menu-item>
                      <a v-if="record.status=='0'"
                         @click="$router.push({path:'/orderCenter/UpdatePacking',query:{packing:record.id,order:$route.query.order,check:'true'}})">编辑批次</a>
                      <a style="margin-left: 8px;" @click="getfahuoid(record.id)" v-if="record.status=='0'">确认发货</a>

                                          <a-popconfirm v-if="record.boxnum=='0'" style="margin-left: 8px;"
                                                        title="确定删除吗?"
                                                        @confirm="() => delPackingFunc(record.id)">
                                            <a style="color:deepskyblue">删除批次</a>
                                          </a-popconfirm>
                    <a
                      @click="$router.push({path:'/orderCenter/UpdatePacking',query:{packing:record.id,order:$route.query.order,check:'false'}})"
                      style="margin-left: 8px;" v-if="record.status=='1'">查看批次</a>
                </a-menu-item>
                  </span>
                  </a-table>
                </div>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane key="4" tab="售后记录跟踪">
            <div class="info">
              <div class="box">
                <h4 class="title1" style="font-weight: 700;width: auto;">售后订单列表</h4>
                <div class="table-css">
                  <a-table class="table1" :row-selection="rowSelection" lign="center"
                           :columns="afterTitle"
                           :loding="true"
                           :pagination="pagination"
                           @change="handleTableChange2"
                           :data-source="afterlist">
                  <span slot="k6" slot-scope="text,record">
                    <router-link
                      :to="{path:'/orderCenter/AfterSaleGroup',query:{id:record.id,after:record.afterCode,orderSn:$route.query.order}}"
                      style="color:#C49D18">查看详情
                    </router-link>
                    <a-popconfirm style="margin-left: 8px" title="确定完结吗?"
                                  @confirm="() => afterOK(record.id)">
                    <a style="color:#C49D18">完成售后</a>
                  </a-popconfirm>
                  </span>

                    <a slot="k4" slot-scope="text" style="color:#C49D18">查看人员</a>

                  </a-table>
                </div>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane key="5" tab="订单产品列表">
            <div class="info">
              <h4 class="title1" style="font-weight: 700;width: auto;">订单产品列表</h4>
              <div class="table-css">
                <a-table class="table1" :row-selection="rowSelection" lign="center" :columns="productList"
                         :loding="true"
                         :pagination="false"
                         @change="handleTableChange"
                         :data-source="allProducts">
                <span slot="proAction" slot-scope="text, record">
                   <a
                     @click="$router.push({path:'/MyOrderSubsystem/CustomizesInfo',query:{product:record.id}})">查看详情</a>
                   <a v-show="orderDetail.status==1" style="margin-left: 8px;"
                      @click="openGYSwINDOW(record.id)">选择加工厂</a>
                </span>

                </a-table>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!--驳回的弹框-->
      <a-modal
        title="订单驳回"
        v-model:visible="visible0"
        @ok="delOrder"
      >
        驳回原因：
        <a-input v-model="jieRemark"/>
      </a-modal>

      <!--干啥？选择供应商-->
      <a-modal
        title="选择加工厂"
        v-model:visible="visible3"
        @ok="selectgysFunc"
      >
        加工厂：
        <a-select
          ref="select"
          style="width: 186.76px"
          v-model:value="gysid"
          placeholder="请选择供应商"
        >
          <a-select-option :label="item.realname" :value="item.id" v-for="(item,key) in gyslist" :key="item.id">
            {{ item.realname }}
          </a-select-option>
        </a-select>
      </a-modal>

      <!--发货的弹框-->
      <a-modal
        title="发货"
        v-model:visible="visible"
        @ok="fahuoNuwFunc"
      >
        <!--      <a-input v-model="thirdSn" placeholder="请输入运单号"/>-->
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="发货方式">
            <a-select
              v-model:value="courierid"
              placeholder=""
            >
              <a-select-option :label="item.courierName" :value="item.id" v-for="(item,key) in getKuaidiList"
                               :key="item.id">
                {{ item.courierName }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="物流信息">
            <a-input v-model="thirdSn"/>
          </a-form-item>

          <a-form-item label="备注信息">
            <a-input v-model="fahuoRemark"/>
          </a-form-item>
        </a-form>
      </a-modal>

      <!--新增批次的弹框-->
      <a-modal
        title="新增批次"
        v-model:visible="visible2"
        @ok="saveBatchFunc"
      >
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="批次名称">
            <a-input v-model="packingName" placeholder="请填写批次名称"/>
          </a-form-item>
          <!--选择部门-->
          <a-form-item label="采购项目">
            <a-select
              style="width: 120px"
              ref="select"
              v-model="departID"
              @blur="getProByDepartFunc"
            >
              <a-select-option :label="item.departName" v-for="(item,key) in departProductlist" :key="item.id"
                               :value="item.id">
                {{ item.departName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!--选择产品（这个界面并不需要这个功能）-->
          <!--<a-form-item label="选择产品">
            <a-select
              style="width: 120px"
              ref="select"
              v-model="packingProID"
            >
              <a-select-option :label="item.productName" v-for="(item,key) in packingProList" :key="item.id"
                               :value="item.id">
                {{item.productName}}
              </a-select-option>
            </a-select>
          </a-form-item>-->
        </a-form>
      </a-modal>

      <!--订单调价-->
      <a-modal
        title="订单调价"
        v-model:visible="tflag"
        @ok="changPriceFunc"
      >
        <label>调价金额：</label>
        <a-input-number style="width: 50%" v-model="changePrice" :min="0"/>
        <br/>
        <br/>
        <lable>调价备注：</lable>
        <a-input style="width: 50%" v-model="tremark"/>
      </a-modal>
    </div>
  </a-card>
</template>

<script>

// 收费服务项
const fuwuFabricTitle = [{
  title: '序号',
  dataIndex: '',
  key: 'rowIndex',
  align: 'center',
  customRender: function (t, r, index) {
    return parseInt(index) + 1
  }
},
  {
    title: '品类名称',
    align: "center",
    dataIndex: 'plname'
  },
  {
    title: '项目',
    align: "center",
    dataIndex: 'name'
  }, {
    title: '类型',
    align: "center",
    dataIndex: 'type'
  },
  {
    title: '金额',
    align: "center",
    dataIndex: 'price'
  },
];

// 订单产品列表表头
const productList = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '产品编号',
    align: "center",
    dataIndex: 'productCode'
  },
  {
    title: '产品数量',
    align: "center",
    dataIndex: 'num'
  },
  {
    title: '品类',
    align: "center",
    dataIndex: 'pingleiName'
  },
  {
    title: '状态',
    align: "center",
    dataIndex: 'gysName',
    customRender: function (text) {
      if (text == null) {
        return '未派'
      } else {
        return text
      }
    }
  },
  {
    title: '操作',
    align: "center",
    scopedSlots: {customRender: 'proAction'}
  },
];

// 加价列表表头
const jiajia = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '品类',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '业务类型',
    align: "center",
    dataIndex: 'butype',
    customRender: function (text) {
      if (text == 1) {
        return '团单业务'
      } else if (text == 2) {
        return '标准码业务'
      }
    }
  },
  {
    title: '参数名称',
    align: "center",
    dataIndex: 'costName'
  },
  {
    title: '总数量',
    align: "center",
    dataIndex: 'number'
  },
  {
    title: '总金额',
    align: "center",
    dataIndex: 'price'
  },
];

// 部门下员工列表
const emp = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '小产品编号',
    align: "center",
    dataIndex: 'code'
  },
  {
    title: '员工姓名',
    align: "center",
    dataIndex: 'customerName'
  },
  {
    title: '性别',
    align: "center",
    dataIndex: 'sex',
    customRender: function (text) {
      if (text == '1') {
        return '男'
      } else if (text == '2') {
        return '女'
      } else if (text == '0') {
        return '未知'
      }
    }
  },
  {
    title: '员工编号',
    align: "center",
    dataIndex: 'customerCode'
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '尺码',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  },
  {
    title: '量体数据',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  },
  {
    title: '员工详情',
    dataIndex: 'k8',
    scopedSlots: {
      customRender: 'k8'
    },
  }
];

// 客供面料
const keFabric = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'fabricName'
  },
  {
    title: '面料编号',
    align: "center",
    dataIndex: 'fabricCode'
  },
  {
    title: '米数',
    align: "center",
    dataIndex: 'mishu'
  },
  {
    title: '面料备注',
    align: "center",
    dataIndex: 'remark'
  }
];

// 这是订单的所有面料列表
const fabriclist = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '面料编号',
    align: "center",
    dataIndex: 'fabricCode'
  },
  {
    title: '米数',
    align: "center",
    dataIndex: 'mishu'
  },
  {
    title: '标准单价',
    align: "center",
    dataIndex: 'fabricPrice'
  },
  {
    title: '客户折扣',
    align: "center",
    dataIndex: 'kehuzk',
    customRender: function (text) {
      if (text == '1') {
        return '100%'
      } else {
        return (Number(text) * 100) + "%"
      }
    }
  },
  {
    title: '折后单价',
    align: "center",
    dataIndex: 'afterPrice'
  },
  {
    title: '总金额',
    align: "center",
    dataIndex: 'allPrice'
  },
];


// 部门产品列表
const depProduct = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '产品货号',
    align: "center",
    dataIndex: 'productCode'
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '人均配置',
    align: "center",
    dataIndex: 'numbers'
  },
  {
    title: '绣字',
    align: "center",
    dataIndex: 'xiuziType',
    customRender: function (text) {
      if (text == null || text == '') {
        return '无绣字'
      } else {
        return text
      }
    }
  },
  /*{
    title: '价格',
    align: "center",
    key: 'allPrice',
    dataIndex: 'allPrice'
  },*/
  {
    title: '产品参数',
    dataIndex: 'action',
    align: 'center',
    // fixed:"right",
    width: 147,
    scopedSlots: {customRender: 'action'}
  }
]


// 加工费用列表
const allprolist = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '品类',
    align: "center",
    dataIndex: 'pingleiName'
  },
  {
    title: '性别',
    align: "center",
    dataIndex: 'sex',
    customRender: function (text) {
      if (text == '0') {
        return '男'
      } else if (text == '1') {
        return '女'
      }
    }
  },
  {
    title: '数量',
    align: "center",
    dataIndex: 'num'
  },

  {
    title: '折前单价',
    align: "center",
    dataIndex: 'zheqianPrice'
  },
  {
    title: '折后单价',
    align: "center",
    dataIndex: 'zhehouPrice'
  },
  {
    title: '客户折扣',
    align: "center",
    dataIndex: 'zk',
    customRender: function (text) {
      if (text == '1') {
        return '100%'
      } else {
        return (Number(text) * 100) + "%"
      }
    }
  },
  {
    title: '总金额',
    align: "center",
    dataIndex: 'price'
  },
];

// 团订售后列表表头
const afterTitle = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '售后单号',
    align: "center",
    dataIndex: 'afterCode'
  },
  {
    title: '更新时间',
    align: "center",
    dataIndex: 'createTime'
  },
  {
    title: '售后金额(元)',
    align: "center",
    dataIndex: 'afterPrice'
  },
  /*  {
      title: '售后类型',
      align: "center",
      dataIndex: 'afterSalesType',
      customRender: function (text) {
        if (text == '0') {
          return '退货'
        } else if (text == '1') {
          return '换货'
        } else if (text == '2') {
          return '返修'
        } else if (text == '3') {
          return '重做'
        }
      }
    },*/
  /*{
    title: '人员名单',
    scopedSlots: {
      customRender: 'k4'
    },
  },*/
  {
    title: '状态',
    align: "center",
    dataIndex: 'afterstatus',
    customRender: function (text) {
      if (text == '0') {
        return '已提交'
      } else if (text == '1') {
        return '已驳回'
      } else if (text == '2') {
        return '售后中'
      } else if (text == '3') {
        return '已完成'
      } else if (text == '4') {
        return '已发货'
      }
    },
  },
  {
    title: '操作',
    align: "center",
    scopedSlots: {
      customRender: 'k6'
    }
  }
];
// @ is an alias to /src
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
// import LgyxCreditRateModal from './modules/LgyxCreditRateModal'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {getAction, getFileAccessHttpUrl} from "../../api/manage";

export default {
  name: 'MyAfterSales',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      changePrice: '', // 调价金额
      tremark: '', // 调价备注
      tflag: false, // 调价弹框
      fuwuFabricTitle, // 里布等表头
      shouFeiList: [], //里布、纽扣列表
      shouFeiPrice: '', // 里布、纽扣价格
      fahuoRemark: '', // 发货的备注
      courierid: '', // 发货选中的快递id
      getKuaidiList: [], // 快递列表
      jieRemark: '', // 驳回的原因
      visible0: false, // 驳回的弹窗是否显示
      selectProid: '', // 选中的产品id
      gysid: undefined, // 供应商ID
      allProducts: [], // 大产品列表
      productList, // 产品列表的表头
      jiajiaList: [], // 加价列表
      jiajia,
      allProductMoney: '', // 加工费用总和
      bzmPriceList: [], // 加工费用列表(标准码)
      zdyPriceList: [], // 加工费用列表（自定义）
      packingProID: '',   // 新增批次选中的产品ID
      packingProList: [], // 新增批次，选中部门之后查询到的部门下产品列表
      departID: '',             // 新增批次弹窗中选中的部门ID
      packingName: '',          // 批次名称
      labelCol: {span: 4},
      wrapperCol: {span: 14},   // 上面两个是弹框内表单的布局
      autohor_token: localStorage.getItem("token"), //token
      packingID: '',      // 选中的批次
      thirdSn: '',        // 运单号
      visible: false,     // 发货弹窗的显示
      visible2: false,    // 新增批次弹窗的显示
      visible3: false,    // 新增批次弹窗的显示
      packingList: [],    // 订单批次列表
      orderDetail: {},    // 团订订单详情
      trackList: [],      // 订单状态列表
      departProductlist: [], // 部门产品列表
      afterlist: [],      // 售后列表
      baseData: {}, // 基本信息
      gyslist: [], // 查询到的供应商列表
      url: {
        pricing: "/orderCenter/pricing", // 订单调价
        afterOK: '/orderCenter/afterOK', // 售后完成
        rejectedOrder: "/orderCenter/rejectedOrder", // 驳回
        gysList: '/fabricCenter/selectGYS', // 供应商列表
        list: '/teamOrder/getBaseTeamOrderDetail',
        teamOrderChengben: '/teamOrder/teamOrderChengben', // 团订加价服务
        teamOrderPrice: '/teamOrder/teamOrderPrice', // 查询团订小产品的价格区间 加工费用
        detail: '/teamOrder/previewOrder', // 团订订单详情
        getFabricOrderTracking: '/orderCenter/getFabricOrderTracking', // 订单跟踪
        listTeamAfter: '/orderCenter/listTeamAfter', // 团订订单售后记录
        listPacking: '/orderCenter/listPacking', // 团订订单批次
        selectGYS: "/orderCenter/selectGYS", // 产品选择供应商（更新产品的供应商）
        fahuoNow: '/orderCenter/pixifahuoNow', // 批次立即发货
        delPacking: '/orderCenter/delPacking', // 删除批次
        savePacking: '/orderCenter/savePacking', // 新增批次
        getBaseTeamOrderDetail: '/teamOrder/getBaseTeamOrderDetail', // 团订基础信息
        getProduct: '/teamOrder/getProduct', // 根据部门ID和订单编号查询产品列表
        getKuaidi: '/orderCenter/getKuaidi', // 快递列表
        listTeamPro: '/OrderFactoryController/listTeamPro?orderSn=' + this.$route.query.order, // 产品列表
        shouFeifuwuXiang: '/teamOrder/shouFeifuwuXiang' // 里布等价格
      },
      // 分页
      pagination: {
        current: '',
        total: 0,
        pageSize: 10,//每页中显示10条数据
      },
      // 订单批次表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '批次名称',
          align: "center",
          dataIndex: 'batchName'
        },
        {
          title: '批次人数',
          align: "center",
          dataIndex: 'personnum'
          /* customRender: (text) => {
             //字典值替换通用方法
             return filterDictTextByCache('sex', text);
           }*/
        },
        {
          title: '采购项名称',
          align: "center",
          dataIndex: 'departName'
        },
        /*{
          title: '收货地址',
          align: "center",
          dataIndex: 'address'
        },*/
        {
          title: '箱数',
          align: "center",
          dataIndex: 'boxnum'
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'status',
          customRender: function (text) {
            if (text == '0') {
              return '待发货'
            } else if (text == '1') {
              return '已发货'
            } else if (text == '2') {
              return '已收货'
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      // selectedRowKeys: [],
      depProduct,// 部门产品表头
      emp,
      allprolist,
      fabriclist,
      keFabric, // 客供面料
      afterTitle,
      locale,
      tab1Data: [{
        id: 1,
        name: '无需试穿'
      }],
      tab1Idx: -1,
      tab2Data: [{
        id: 1,
        name: '常规',
        hoveName: '7个工作日'
      }],
      tab2Idx: -1,
      tab3Data: [{
        id: 1,
        name: '来款/样式'
      },],
      tab3Idx: -1,
      tab4Data: [{
        id: 1,
        name: '派定制'
      },],
      tab4Idx: -1,
      tab5Data: [{
        id: 1,
        name: '备注信息'
      },],
      tab5Idx: -1,
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  created() {
    this.getBaseDetail()
    this.getOrderDetail()
    this.getTrackingOrder()
    this.getAfterList()
    this.getpackintListFunc()
    this.teamOrderPriceFunc()
    this.teamOrderChengbenFunc()
    this.listTeamProFunc()
    this.getgys()
    this.getKuaidiFunc()
    this.shouFeifuwuXiangFunc()
  },
  methods: {

    /**
     * 订单调价
     * @author zxl
     */
    changPriceFunc() {
      if (this.changePrice == '') {
        this.$message.error("请输入调价金额")
        return;
      } else {
        getAction(this.url.pricing, {
          'orderType': 1,
          'orderSn': this.$route.query.order,
          'price': this.changePrice,
          'remark': this.tremark
        }).then(res => {
          if (res.code == '200') {
            this.tflag = false
            this.$message.success("调价成功")
            this.getOrderDetail()
          } else {
            this.tflag = false
            this.$message.error("调价失败")
          }
        })
      }
    },

    /**
     * 下载
     */
    download(id) {
      let url = getFileAccessHttpUrl(window._CONFIG['domianURL'] + "/teamOrder/departProExcel3?departId=" + id)
      window.open(url);
    },

    /**
     * 获取里布价格列表
     */
    shouFeifuwuXiangFunc() {
      getAction(this.url.shouFeifuwuXiang, {
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.code == '0') {
          this.shouFeiList = res.data
          this.shouFeiPrice = res.price
        }
      })
    },

    /**
     * 获取快递信息
     */
    getKuaidiFunc() {
      getAction(this.url.getKuaidi).then(res => {
        if (res.code == '0') {
          this.getKuaidiList = res.data
        }
      })
    },

    /**
     * 售后完成
     */
    afterOK(id) {
      getAction(this.url.afterOK, {"id": id}).then(res => {
        if (res.code == '0') {
          this.getAfterList()
          this.$message.success("操作成功")
        } else {
          this.$message.success("操作失败")
        }
      })
    },

    //（驳回个订订单）
    delOrder() {
      getAction(this.url.rejectedOrder, {
        'orderType': 1,
        'orderID': this.orderDetail.id,
        'remark': this.jieRemark
      }).then(res => {
        if (res.code == '0') {
          this.$message.success("驳回成功")
          this.$router.go(-1)
        } else {
          this.$message.warning("驳回失败")
        }
      })
    },

    /**
     * 打开驳回的弹窗
     */
    openDelWindow() {
      this.visible0 = true
    },

    /**
     * 给产品选择供应商
     */
    selectgysFunc() {
      getAction(this.url.selectGYS, {
        'proid': this.selectProid,
        'gysid': this.gysid
      }).then(res => {
        if (res.code == '0') {
          this.$message.success('操作成功')
          this.listTeamProFunc()
        } else {
          this.$message.error('操作失败')
        }
        this.visible3 = false
      })
    },

    // 获取供应商列表
    getgys() {
      getAction(this.url.gysList).then(res => {
        this.gyslist = res.result
      })
    },

    /**
     * 打开选择供应商的弹窗
     * @param proid 选中的产品id
     */
    openGYSwINDOW(proid) {
      this.selectProid = proid
      this.visible3 = true
    },

    /**
     * 获取产品列表
     */
    listTeamProFunc() {
      getAction(this.url.listTeamPro).then(res => {
        if (res.code == '0') {
          this.allProducts = res.data
        }
      })
    },

    /**
     * 获取团订加价服务
     */
    teamOrderChengbenFunc() {
      getAction(this.url.teamOrderChengben, {
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.code == '0') {
          this.jiajiaList = res.data
          /*this.alljiajiaPrice = res.allMoney*/
        }
      })
    },

    /**
     *加工费用列表
     */
    teamOrderPriceFunc() {
      getAction(this.url.teamOrderPrice, {
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.code == '0') {
          this.bzmPriceList = res.bzm
          this.zdyPriceList = res.zdy
          this.allProductMoney = res.allMpney
        } else {
          this.$message.error("查询失败")
        }
      })
    },

    /**
     * 新增批次
     */
    saveBatchFunc() {
      if (this.packingName == '' || this.departID == '') {
        this.$message.warning("请填写完整的批次信息")
        return
      } else {
        getAction(this.url.savePacking, {
          'departID': this.departID,
          'packingName': this.packingName,
          'orderSn': this.$route.query.order
        }).then(res => {
          if (res.code == '0') {
            this.visible2 = false
            this.$message.success("添加成功")
            this.packingName = ''
            this.getpackintListFunc()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },

    /**
     * 根据部门ID获取产品列表（用于新增批次弹窗）
     */
    getProByDepartFunc() {
      if (this.departID == '') {
        this.$message.warning("请先选中部门")
        return
      } else {
        getAction(this.url.getProduct, {
          'departid': this.departID,
          'orderSn': this.$route.query.order
        }).then(res => {
          if (res.code == '0') {
            this.packingProList = res.data
          }
        })
      }
    },

    /**
     * 新增批次
     */
    openNewPacking() {
      this.visible2 = true
    },

    /**
     * 删除批次
     */
    delPackingFunc(packingID) {
      getAction(this.url.delPacking, {
        'packingID': packingID
      }).then(res => {
        if (res.code == '0') {
          this.$message.success("删除成功")
          this.getpackintListFunc()
        } else {
          this.$message.error("删除失败")
        }
      })
    },

    /**
     *点击立即发货获取批次ID
     */
    getfahuoid(packingID) {
      this.visible = true
      this.packingID = packingID
    },

    /**
     * 立即发货
     */
    fahuoNuwFunc() {
      if (this.thirdSn == '') {
        this.$message.warning("请输入运单号")
        return
      } else {
        getAction(this.url.fahuoNow, {
          'packingID': this.packingID,
          'thirdSn': this.thirdSn, // 运单号
          'kdid': this.courierid, // 快递id
          'remark': this.fahuoRemark, // 备注信息
        }).then(res => {
          if (res.code == '0') {
            this.visible = false
            this.thirdSn = ''
            this.getpackintListFunc()
            this.$message.success("发货成功")
          }
        })
      }
    },

    /**
     * 获取订单批次列表
     * @author zxl
     * @since 20201116
     */
    getpackintListFunc() {
      getAction(this.url.listPacking, {
        orderSn: this.$route.query.order
      }).then(res => {
        if (res.code == '0') {
          this.packingList = res.data
        }
      })
    },

    /**
     * 获取订单基本信息
     * @author zxl
     * @since 20201116
     */
    getBaseDetail() {
      getAction(this.url.getBaseTeamOrderDetail, {
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.code == '0') {
          this.baseData = res.data
        }
      })
    },

    /**
     * 获取团订订单详情
     * @author zxl
     * @since 20201116
     */
    getOrderDetail() {
      const loading = this.$loading({
        lock: true,
        text: '数据拼命加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getAction(this.url.detail, {
        'orderSn': this.$route.query.order
      }).then(res => {
        loading.close();
        if (res.code == '0') {
          this.orderDetail = res.data
          this.departProductlist = res.data.departs
        }
      })
    },
    /**
     * 获取订单跟踪信息
     * @author zxl
     */
    getTrackingOrder() {
      getAction(this.url.getFabricOrderTracking, {
        'orderSn': this.$route.query.order,
        'orderType': '1'
      }).then(res => {
        if (res.code == '0') {
          this.trackList = res.data
        }
      })
    },

    // 获取团订订单售后记录列表
    getAfterList() {
      getAction(this.url.listTeamAfter, {
        'orderSn': this.$route.query.order,
        'orderType': 1
      }).then(res => {
        if (res.code == '0') {
          this.afterlist = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        }
      })
    },

    // 分页器方法
    handleTableChange2(page, pageSize) {
      getAction(this.url.listTeamAfter, {
        'pageNo': page.current,
        'pageSize': page.current.pageSize,
        'orderSn': this.$route.query.order,
        'orderType': 1
      }).then(res => {
        if (res.code == '0') {
          this.afterlist = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        }
      })
    },

    selectTab: function (dataStr, i) {
      this[dataStr] = i
    }
  }
}
</script>

<style scoped lang="less">
.roder-details {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 20px 35px;

  .box {
    background-color: #fff;
    padding: 30px;
    padding-left: 54px;
    margin-bottom: 20px;
    position: relative;
  }


  .info {
    position: relative;
    min-height: 800px;
    position: relative;

    .dc {
      position: absolute;
      right: 20px;
      top: 15px;
      z-index: 11;
      width: 95px;
      height: 38px;
      display: flex;
      font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
      font-weight: 500;
      font-style: normal;
      align-items: center;
      justify-content: center;
      background-image: url(../../assets/u9117.svg);
      font-size: 13px;
      color: #333;

    }


    .view-order {
      width: 107px;
      border-width: 0px;
      position: absolute;
      right: 0px;
      top: 0px;
      width: 105px;
      height: 42px;
      background: inherit;
      background-color: rgba(81, 81, 81, 1);
      border: none;
      border-radius: 3px;
      box-shadow: none;
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      text-align: center;
      display: block;
      color: rgb(236, 227, 0);
      line-height: 40px;
      margin-right: 20px;
      cursor: pointer;
    }

    .price1 {
      color: rgb(38, 38, 38);
      font-size: 16px;
      font-weight: 400;
      padding: 2px 2px 2px 24px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
      position: relative;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }

    .prices {
      display: flex;

      .price {
        width: 50%;
      }
    }

    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;
      font-weight: 700;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
      font-weight: 700;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
